<template>
    <div class = "MyRadio" :style = "{width: size + 'rpx',height: size + 'rpx',borderColor: currentColor}" @click = "changeState">
        <div v-show = "state" class = "active" :style = "{width: size / 2 + 'rpx',height: size / 2 + 'rpx',backgroundColor: activeColor}"></div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            state: false,
        }
    },
    computed: {
        currentColor(){
            if(this.state){
                return this.activeColor
            }else{
                return this.color
            }
        }
    },
    props: ["size","color","activeColor"],
    methods: {
        changeState(){
            this.state = !this.state;
            this.$emit("change",this.state);
        }
    }
}
</script>
<style scoped>
    .MyRadio{
        position: relative;
        display: inline-block;
        border-width: 1rpx;
        border-style: solid;
        border-radius: 50%;
    }
    .active{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        border-radius: 50%;
    }
</style>